在了解如何做H5页面适配前，大家都应该把移动端涉及的一些概念搞明白，比如：dpr 是什么意思？

移动端H5解惑-概念术语（一）

因为在PC端，由于浏览器种类太多啦，比如几个常用的：IE、火狐、Chrome、Safari等。同时，由于历史原因，不同浏览器在不同时期针对当时的WEB标准有一些不一样的处理（虽然大部分一样），比如：IE6、IE8、IE10+等对于一些JS事件处理、CSS样式渲染有所不同。 而恰恰又有一些人在使用着不同类型的浏览器，以及不同浏览器的不同版本。所以，为了能让你的网站让这些不同的人看到效果一致，你就不得不做兼容，除非这些人不是你的目标用户。

在移动端虽然整体来说大部分浏览器内核都是webkit，而且大部分都支持CSS3的所有语法。但是，由于手机屏幕尺寸不一样，分辨率不一样，或者你需要考虑横竖屏的问题，这时候你也就不得不解决在不同手机上，不同情况下的展示效果了。

另外一点，UI一般输出的视觉稿只有一份，比如淘宝就会输出：750px 宽度的（高度是动态的一般不考虑）（详情），这时候开发人员就不得不针对这一份设计稿，让其在不同屏幕宽度下显示 一致。

一致是什么意思？就是下面提到的几个主要解决的问题。

举个栗子：

在 1080px 的视觉稿中，左上角有个logo，宽度是 180px（高度问题同理可得）。

那么logo在不同的手机屏幕上等比例显示应该多大尺寸呢？

其实按照比例换算，我们大致可以得到如下的结果：

以下就是一些实现思路：

方案1：使用css的媒体查询 @media

这个方案有2个比较突出的问题：

方案2：使用 rem 单位

注意我们的推导公式：

方案2有效的解决了方案1中，同一个元素需要在多个 media 中写的问题，这里只需要多定义几个 media 就可以大致解决问题了。

但是本方案仍然有以下问题：

针对除以1080我们能不能直接放到html的font-size上，变成这样：

如果变成这样，那么 .logo 的css中就只需要按设计稿的尺寸大小写就可以了。到底可不可以呢？

答案是：不可以。

主要原因是，浏览器有最小字体限制：

如果小于最小字体，那么字体默认就是最小字体。

再来看上面的css，比如：

所以当你这么设置font-size时，在手机上由于小于最小字体8px，所以页面会按照默认字体算。

所以，最终就相当于你是这么设置的：

所以，大家在设置html的font-size的时候一定要保证最小等于8px！

因而为了解决这个问题，建议大家使用Sass这种Css开发语言，可以定义公式的，这样写css就方便了。

最终使用Sass的代码如下：

以上方案虽然解决了问题，但任然有以下缺陷：

方案3：js动态设置根字体

由于方案2最主要的问题就是需要针对不同的屏幕尺寸，定义多个 @media，所以我们先将这个字体设置改为动态设置。

注意我们的推导公式：

需要注意：

document.documentElement.clientWidth 这个语句能获取到的准确的手机尺寸的前提是建立在html中设置了如下标签：

要不然获取到的结果将始终是：980

然后Sass中就可以按照设计稿的尺寸大小去写就行了：

如果不考虑别的因素，只是页面元素大体适配的话，该方案基本就满足要求了，但是现实中我们其实还有很多问题，所以我们的方案还需要继续优化。

文字也采用rem的单位主要有什么问题呢？

对于以上问题，我个人的建议：

如果一定要解决这个问题，那么字体就不要使用rem方案了，而是继续使用px单位。

我们上面提到 大屏 小屏 其实隐含的意思并不是手机屏幕大，而是手机的屏幕分辨率不一样，其实就是dpr不一样，所以我们针对不同的dpr设置具体的字体就可以了。

比如，我们针对页面的标题的字体大小就可以如下设置：

先来看看 这里 这篇文章，有讲解了为什么在有些屏幕上要使用 @2x @3x 的高清图。

再来看看 这里 讲解了具体的高清图的解决方案。

我这里简单归纳下。

3.3.1 对于 标签引入的图片高清解决方案

1、使用 srcset 标签

关于 srcset 的说明：猛戳这里

2、使用js自带的 Image 异步加载图片

3.3.2 对于背景图片高清解决方案

1、使用 media query 来处理

2、使用 image-set 来处理（有兼容问题）

什么是 1像素问题 ？

我们说的1像素，就是指1 CSS像素。 比如设计师实际了一条线，但是在有些手机上看着明显很粗，为什么？ 因为这个1px，在有些设备上（比如：dpr=3），就是用了横竖都是3的物理像素矩阵（即：3x3=9 CSS像素）来显示这1px，导致在这些设备上，这条线看上去非常粗！ 其实在在中手机上应该是1/3px显示这条线。

方案1：使用css3的 scaleY(0.5) 来解决

比如：div的border-top的1px问题解决。

但是，这种方案只能解决直线的问题，涉及到圆角之类的，就无能为力！

方案2：页面缩放解决问题

我们先来讲讲页面缩放能解决1px问题的原理示。

首先大家需要了解一些 viewport 的常识，参考：这里

假如以下手机的 dpr=2

对于dpr=2的手机设备，1px就会有 2x2 的物理像素来渲染，但是当缩放以后其实就变成 1x1 个单位渲染了，看下面示意图：

所以，我们的思路就是将整个页面缩小dpr倍，再将页面的根字体放大dpr倍。这样页面虽然变小了，但是由于页面整体采用rem单位，当根字体放大dpr倍以后，整体都放大了，看上去整体样式没什么变化。

1、将scale设置为1/dpr

假如：dpr = 2

2、clientWidth获取的值会自动扩大dpr倍

比如，以前是360px，当页面缩小0.5倍，获取到的值会变为720px。

3、css中涉及到1像素问题的地方使用 px 作为单位

比如：

以上步骤最终整理的结果：

html：

js：

scss：

横竖屏问题，就是当你横屏手机、竖屏手机时看到的不一样的效果问题。

我这里要说的这个问题，就是设计师会针对横屏或者竖屏，做不一样的设计，比如：横屏时显示摘要，竖屏时只有标题，这种情况下，我们应该怎么适配的问题。

关于横竖屏问题，我将会分2个部分来说明：

3.5.1 横竖屏显示内容问题

我们知道横屏，相当于屏幕变宽了，这时候一行显示的内容就可以更多。所以，设计师可能会对横竖屏做2种不同的内容设计，如：

3.5.3 附1：JS检测横竖屏

js获取屏幕旋转方向：window.orientation

3.5.4 附2：CSS判断横竖屏

手机字体缩放是什么问题呢？

就是当你在手机 设置 -> 字体设置 中将字体放大或者缩小，使得手机整体系统字体发生了变化，这时候可能就会影响到H5页面正常的显示。

经过实际测试，这个问题当前发生的概率不是很大，因为很多手机厂商都已经做了保护措施。但是为了保险起见，我们还是有必要进行检测，一旦不一样就要采取措施。

3.6.1 如何检测手机字体不是默认字体

3.6.2 如果手机字体不是默认字体如何处理

比如：你想设置的字体大小为100px，但是实际大小却为50px，那么你可以确定其实用户字体是缩放了0.5，这时候你就需要将你的字体扩大1倍，这样才能保证实际页面的字体是100。

所以，按照这个等比例换算以后，我们就需要重新设置页页面的font-size。

这么做理论上已经解决了问题，但是还有点瑕疵，问题就是：

如何解决这个问题？思路就是：

最终代码片段如下：

除了上面一步步的分析中间的原理之外，我们可能还需要考虑或者遇到以下问题：

所以，在尽可能的解决诸多问题后，最终的脚本如下：

html:

js:

scss:

如果不太考虑老的手机型号，可以采用 viewport 单位。

由于我本人也没有在项目中使用这个方案，所以不过多发表言论，大家有兴趣的可以研究下。

具体方案细节参考：

作者：vivo丨sunmaobin 链接：https://juejin.im/post/5b6503dee51d45191e0d30d2